<template>
 <div class="main">
    <div class="header" @click="centerDialogVisible=true">
        <div style="width: 100%; height: 100%;">
            <img src="../../public/mimages/1.png" alt="" width="100%" height="100%">
        </div>  
    </div>
    <div class="body">
        <div class="card1">
           <div style="
           width: 350px; 
           height:130px; 
           position: absolute;
           top: 50px;
           left: 50px;">
                <p style="font-weight: 600; font-size: 20px; padding-bottom: 6px;">x i a o m i 1 3</p>
                <p style="font-size: 8px; padding: 0 0 15px 25px;">小米 | 徕卡  联合开发</p>
                <p style="font-weight: 600; font-size: 20px; padding-bottom: 6px;">原汁原味徕卡影像</p>
                <p style="font-weight: 600; font-size: 20px; padding-bottom: 15px;">质感再飞跃</p>
                <ul style=" font-size: 8px; padding-bottom: 6px; float: left;">
                    <li style=" float: left; padding-right: 8px;"><i class="el-icon-info" style="color:red ;"></i>徕卡专业光学镜头</li>
                    <li style=" float: left; padding-right: 8px;"><i class="el-icon-info" style="color: red;"></i>徕卡原生双画质</li>
                    <li style=" float: left; padding-right: 8px;"><i class="el-icon-info" style="color: red;"></i>沉浸式徕卡体验</li>
                </ul>
           </div>
        </div>
        <div class="card2">
            <div class="card3">
                <div class="card5">
                    <div class="card7">
                        <div style="
                        width: 180px;
                        height: 200px; 
                        position: relative;
                        top: 40px;
                        left: 30px;">
                            <p style="font-weight: 600; font-size:13px; padding-bottom: 6px;">第二代骁龙 8 旗舰处理器</p>
                            <p style="font-weight: 600; font-size:13px; padding-bottom: 10px;">性能爆发，能效跃升</p>
                            <p style=" font-size:8px; padding-bottom: 6px;">超级核心X3，体验超震撼</p>
                            <p style=" font-size:8px; padding-bottom: 6px;">新增超性能核心，高性能，低功耗</p>
                        </div>
                    </div>
                    <div class="card8">
                        <div style="
                        width: 180px; 
                        height: 200px; 
                        position: relative;
                        top: 40px;
                        left: 30px;">
                            <p style="font-weight: 600; font-size:13px; padding-bottom: 6px;">DOU 1.37天</p>
                            <p style="font-weight: 600; font-size:13px; padding-bottom: 10px;">续航大超想象</p>
                            <p style=" font-size:8px; padding-bottom: 6px;">小米澎湃电池管理系统</p>
                            <p style=" font-size:8px; padding-bottom: 6px;">67W 小米澎湃有线秒冲</p>
                            <p style=" font-size:8px; padding-bottom: 6px;">50W 小米澎湃无线秒冲</p>
                        </div>
                    </div>
                </div>
                <div class="card6">
                    <div style="
                    width: 150px; 
                    height: 200px; 
                    position: relative;
                    top: 40px;
                    left: 30px;">
                        <p style="font-weight: 600; font-size:13px; padding-bottom: 6px;">专业创造旗舰好屏</p>
                        <p style="font-weight: 600; font-size:13px; padding-bottom: 10px;">亮眼节能，专业显示</p>
                        <p style=" font-size:10px; padding-bottom: 6px;">新一代发光材料</p>
                        <p style=" font-size:10px; padding-bottom: 6px;">超动态显示</p>
                    </div>
                </div>
            </div>
            <div class="card4">
                <div style="
                width: 150px; 
                height: 200px; 
                position: relative;
                top: 40px;
                left: 50px;">
                    <p style="font-weight: 600; font-size:15px; padding-bottom: 6px;">高光金属直立边框</p>
                    <p style="font-weight: 600; font-size:15px; padding-bottom: 10px;">超窄边屏幕</p>
                    <p style=" font-size:10px; padding-bottom: 6px;">尽显先锋设计</p>
                    <p style=" font-size:10px; padding-bottom: 6px;">多款时尚色彩</p>
                </div>  
            </div>
        </div>
        <button class="btn" @click="httpupto(0)">
                <p style="font-size:17px;font-weight:500;">更多相关商品<i class="el-icon-arrow-right"></i></p>
        </button>
    </div>
 </div>
</template>

<script>
import axios from 'axios';
export default{
 name: '',
 components: {},
 data(){
    return{
        commodityListvalue:{
            index:0,
            id:0
        },
    }
 },
 methods:{
    httpupto(ins){
        this.commodityListvalue.index = ins
        axios.patch('http://localhost:3001/mishowlistindex/0', this.commodityListvalue).then(()=>{
        this.$router.push('miphone')
                    })
  }
 }
};
</script>

<style scoped lang='less'>
.main{
    height: 1100px;
    width: 100%;
    background: linear-gradient(rgba(255,255,255,0.8),rgba(100, 186, 236, 0.8));
    .header{
    margin-left: 7%;
    width: 85%;
    height:500px;
    }
    .body{
        width: 700px;
        height: 600px;
        background-color: aliceblue;
        position: relative;
        margin: auto;
        .btn{
            position: relative;
            top: 40px;
            left: 280px;
            border: none;
            background: rgba(255, 255, 255, 0);
        }
        .btn :hover{
            color: orange;
        }
        .card1{
            width: 100%;
            height: 200px;
            background:url('../../public/mimages/xiaomi1302.png') no-repeat;
            background-size:contain;
            background-position: center 0;
            margin-bottom: 8px;    
        }
        .card2{
            width: 100%;
            height: 392px;
            .card3{
                float: left;
                width: 460px;
                height: 100%;
                margin-right: 8px;
                .card5{
                    width: 460px;
                    height: 250px;
                    margin-bottom: 8px;
                    .card7{
                        width: 230px;
                        height: 242px;
                        float: left;
                        background:url('../../public/mimages/xiaomi1303.png') no-repeat;
                        background-size:contain;
                        background-position: center 0;
                    }
                    .card8{
                        width: 230px;
                        height: 242px;
                        float: left;
                        background:url('../../public/mimages/xiaomi1304.png') no-repeat;
                        background-size:contain;
                        background-position: center 0;
                    }
                }
                .card6{
                    width: 460px;
                    height: 132px;
                    background:url('../../public/mimages/xiaomi1305.png') no-repeat;
                    background-size:contain;
                    background-position: center 0;
                    
                }
            }
            .card4{
                float: left;
                width: 232px;
                height: 100%;
                background:url('../../public/mimages/xiaomi1306.png') no-repeat;
                background-size:contain;
                background-position: center 0;
            }
        }
    }
}

</style>